책 목록 웹앱 만들기2 제넉릭문제 | ✅저자: 이유정(박사)

🔹 간단한 책 제목과 저자를 저장하고, 화면에 예쁘게 출력하는 웹앱

bookproject/
├── manage.py
├── bookproject/
│   └── settings.py, urls.py ...
└── books/
    ├── models.py
    ├── views.py
    ├── urls.py
    ├── templates/
    │   └── books/
    │       ├── base.html
    │       ├── book_list.html
    │       ├── book_detail.html
    │       └── book_results.html
    └── static/
        └── books/
            └── css/
                └── style.css

모델 정의 – books/models.py

from django.db import models

class Book(models.Model):

모델 정의 books/models.py 파일에서 다음을 수행하세요.

• 책 정보를 저장할 Book 모델을 정의합니다.
• 다음 필드를 포함하세요:
  • title: 책 제목, 최대 200자
  • author: 저자 이름, 최대 100자
  • votes: 정수, 기본값은 0, 사용자 투표 수 저장

뷰 작성 – books/views.py

from django.shortcuts import render
from .models import Book

def book_list(request):

📄 books/views.py에서 아래 작업을 수행하세요.

책 목록 보기

• 제너릭 클래스 뷰 ListView를 사용하여 책 목록을 보여주는 BookListView를 정의하세요.
• 템플릿 이름은 books/book_list.html
• 템플릿에서 사용할 변수 이름은 "books"로 설정하세요.

책 상세 보기 및 투표 폼

• BookDetailView를 작성하여 단일 책 상세 정보를 보여주고, "이 책에 투표하기" 버튼을 포함한 폼을 출력하세요.
• 템플릿 이름: books/book_detail.html
• 템플릿에서 사용할 변수 이름: "book"

투표 처리

• 함수형 뷰 vote(request, pk)를 작성하세요.
• 사용자가 POST 방식으로 투표 버튼을 클릭하면 해당 책의 votes 수를 1 증가시키세요.
• 이후 결과 페이지로 리디렉션 하세요. (HttpResponseRedirect + reverse 사용)
• GET 방식 접근 시에는 book_detail.html로 오류 메시지를 포함해 다시 렌더링하세요.

결과 보기

• BookResultsView를 작성하여 책의 투표 결과를 보여주세요.
• 템플릿: books/book_results.html
• 변수 이름: "book"

✔️ 의사코드:

BookListView 클래스 (책 목록 보여주기)
- Book 모델의 모든 책 데이터를 가져온다
- 'books/book_list.html' 템플릿을 사용해 화면에 출력한다
- 템플릿 안에서는 books 라는 이름으로 데이터를 참조할 수 있다

BookDetailView 클래스 (책 상세 정보 + 투표 폼 보여주기)
- URL의 pk 값을 기준으로 특정 책(Book)을 가져온다
- 'books/book_detail.html' 템플릿을 사용해 책 제목, 저자, 투표 버튼을 보여준다
- 템플릿 안에서는 book 이라는 이름으로 데이터를 참조한다

vote 함수 (사용자가 투표 버튼 눌렀을 때 처리)
- URL의 pk 값을 기준으로 특정 책(Book)을 가져온다
- 요청이 POST 방식인지 확인한다
    - 맞으면: 그 책의 votes 값을 1 증가시킨다 (동시성 문제 없이 처리)
    - 저장한 후, 그 책의 결과 페이지로 리다이렉트한다
- POST 방식이 아니면:
    - 다시 상세 페이지를 보여주되, 오류 메시지도 함께 전달한다

BookResultsView 클래스 (투표 결과 보여주기)
- URL의 pk 값을 기준으로 특정 책(Book)을 가져온다
- 'books/book_results.html' 템플릿을 사용해 투표 수를 화면에 출력한다
- 템플릿 안에서는 book 이라는 이름으로 데이터를 참조한다

앱 URL 설정 – books/urls.py

• bookproject/urls.py에서 /books/ 경로로 books 앱을 연결하세요.

템플릿 – books/templates/books/base.html

• title과 content 블록을 정의하세요.
• 공통 스타일 파일을 링크로 연결하세요. (books/css/style.css)

템플릿 – books/templates/books/book_list.html

• base.html을 상속하세요.
• books 리스트를 반복하며 책 제목과 저자를 출력하고, 제목에 상세 페이지로 가는 링크를 만드세요.

템플릿 – books/templates/books/book_detail.html

• 책 제목, 저자를 출력하고, 투표할 수 있는 POST 폼을 작성하세요.
• CSRF 보호를 적용하세요.
• error_message가 있을 경우 메시지를 화면에 출력하세요.

템플릿 – books/templates/books/book_results.html

• 책 제목, 저자, 총 투표 수를 보여주세요.
• 다시 목록으로 돌아가는 링크도 포함하세요.

CSS – books/static/books/css/style.css 디자인은 자유이나 다음 요소는 반드시 포함하세요:

• .container: 패딩, 배경색, 테두리 둥글기
• .book-list: 리스트 스타일 제거, 간격 조정

설정 – settings.py STATIC 설정 확인

STATIC_URL = "static/"

최종결과 확인하기:

python manage.py makemigrations
python manage.py migrate
python manage.py runserver

/books/ — 책 목록 화면

📘 나의 책 목록
─────────────────────────────
데미안         by 헤르만 헤세
어린 왕자      by 앙투안 드 생텍쥐페리
삼국지         by 나관중
─────────────────────────────
(책 제목을 클릭하면 상세 페이지로 이동)

/books/1/ — 책 상세 및 투표 화면

📗 데미안
─────────────────────────────
저자: 헤르만 헤세

[ 이 책에 투표하기 ] ← 버튼

─────────────────────────────
(버튼 클릭 시 해당 책에 투표하고 결과 페이지로 이동)

/books/1/results/ — 투표 결과 화면

📙 데미안
─────────────────────────────
저자: 헤르만 헤세

총 투표 수: 5

← 목록으로 돌아가기
─────────────────────────────